<template>
	<view>
		<!--  计次卡-->
		<view v-if="data.type == 1">
			<view class="" :class="{ lapse }">
				<view class="cardpackitem pr" v-if="!lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; "
						@click="$emit('click')">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate == 1 && data.type == 1" style="margin-right: 20rpx;"></view>
						<view v-else style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>

					<view style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" @click="$emit('click')">
							<view class="flex-align">
								<view class="name" style="color: #4BA677;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view style="margin-top: 30rpx;margin-right: 20rpx;">
							<navigator
								:url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
								v-if="!lapse">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`"
										width="80rpx" height="80rpx"></u-image>
								</view>
							</navigator>
							<view class="qrcode" v-if="lapse">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;" @click="$emit('click')">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 1">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>
					</view>
				</view>
				<view class="cardpack_item pr" v-if="lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; ">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate == 1 && data.type == 1" style="margin-right: 20rpx;"></view>
						<view v-else style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>

					<view style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;">
							<view class="flex-align">
								<view class="name" style="color: #999999;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view style="margin-top: 30rpx;margin-right: 20rpx;">
							<view class="qrcode">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 1">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--  时间卡-->
		<view v-if="data.type == 2">
			<view class="" :class="{ lapse }">
				<view class="cardpackitem pr" v-if="!lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; "
						@click="$emit('click')">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate != 1 && data.type != 1"
							style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" @click="$emit('click')">
							<view class="flex-align">
								<view class="name" style="color: #4BA677;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<navigator
								:url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
								v-if="!lapse">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`"
										width="80rpx" height="80rpx"></u-image>
								</view>
							</navigator>
							<view class="qrcode" v-if="lapse">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;" @click="$emit('click')">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 2">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								{{ data.yxq }}
							</view>
						</view>
					</view>
				</view>
				<view class="cardpack_item pr" v-if="lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; ">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate != 1 && data.type != 1"
							style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;">
							<view class="flex-align">
								<view class="name" style="color: #999999;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<view class="qrcode">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 2">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								{{ data.yxq }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!--  充值卡-->
		<view v-if="data.type == 3">
			<view class="" :class="{ lapse }">
				<view class="cardpackitem pr" v-if="!lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; "
						@click="$emit('click')">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate >1" style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" @click="$emit('click')">
							<view class="flex-align">
								<view class="name" style="color: #4BA677;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<navigator
								:url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
								v-if="!lapse">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`"
										width="80rpx" height="80rpx"></u-image>
								</view>
							</navigator>
							<view class="qrcode" v-if="lapse">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;" @click="$emit('click')">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 3">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>

					</view>
				</view>
				<view class="cardpack_item pr" v-if="lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; ">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate >1" style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;">
							<view class="flex-align">
								<view class="name" style="color: #999999;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<view class="qrcode">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 3">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!--  私教卡-->
		<view v-if="data.type == 4">
			<view class="" :class="{ lapse }">
				<view class="cardpackitem pr" v-if="!lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; "
						@click="$emit('click')">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate != 1 && data.type != 1"
							style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>

					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;" @click="$emit('click')">
							<view class="flex-align">
								<view class="name" style="color: #4BA677;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<navigator
								:url="`/pages/personal/qrcode/qrcode?cardno=${data.cardno}&id=${data.id}&title=我的卡包&choose=选择消费卡`"
								v-if="!lapse">
								<view class="qrcode">
									<u-image :src="`${assetsPath}b1e50955b772098ac246cec765da2e4ee6e57205.png`"
										width="80rpx" height="80rpx"></u-image>
								</view>
							</navigator>
							<view class="qrcode" v-if="lapse">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;" @click="$emit('click')">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 1">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>
					</view>
				</view>
				<view class="cardpack_item pr" v-if="lapse">
					<view class="card_bg"
						style="display: flex; justify-content: space-between;flex-direction: row;align-items: center; ">
						<view class="flex-align " style="margin-left: 20rpx;">
							<u-image :src="`${assetsPath}44c7da7e9f87be74a641c1c43a7408e0876126aa.png`" width="30rpx"
								height="30rpx" shape="square"></u-image>
							<view style="margin-left: 13rpx;font-size: 28rpx;">{{ data.venue_name }}</view>
						</view>
						<view v-if="data.cardstate != 1 && data.type != 1"
							style="margin-right: 20rpx;font-size: 24rpx;">
							{{ data.yxq }}
						</view>
					</view>

					<view class="" style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="margin-top: 30rpx;margin-left: 20rpx;">
							<view class="flex-align">
								<view class="name" style="color: #999999;font-size: 34rpx;font-weight: 600;">
									{{ data.goods_name }}</view><text
									v-if="data.alias_name!=''">({{data.alias_name}})</text>
								<view
									style=" width: 100rpx; height: 40rpx;background-color:  #d8d8d8;border-radius:10rpx;color: #fff ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.cardstate == 6"><text>封卡</text>
								</view>
							</view>
							<view class="flex-between" style="">
								<view class="name" style="color: #333333;font-size: 26rpx;margin-top: 10rpx;">
									no.<text>{{ data.cardno }}</text></view>
							</view>
						</view>
						<view class="" style="margin-top: 30rpx;margin-right: 20rpx;">
							<view class="qrcode">
								<u-image :src="`${assetsPath}066f64303f1d6ab9bbf5d9a6272b09b87d09c4d0.png`"
									width="80rpx" height="80rpx"></u-image>
							</view>
						</view>
					</view>

					<view style="margin-top: 20rpx;margin-left: 20rpx;">
						<view class="flex-between bottom" v-if="data.cardstate == 1 && data.type == 1">
							<view class="date" style="color: #999999;">暂未开卡</view>
						</view>
						<view class="flex-between bottom" v-else>
							<view>
								剩余：{{ data.else_text }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				required: true
			},
			lapse: Boolean
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
			}
		},
	}
</script>

<style lang="scss" scoped>
	card-pack-item {
		.card-pack-item {
			margin-top: 30rpx;
		}
	}

	.card-pack-item {
		color: #fff;
		padding: 30rpx 30rpx 12rpx;
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		&+.card-pack-item {
			margin-top: 30rpx;
		}

		&.lapse {

			.bottom,
			.balance {
				color: rgb(153, 153, 153) !important;
			}
		}

		.number {
			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.name {
			font-size: 36rpx;
		}

		.bottom {
			color: rgb(102, 102, 102);
			font-size: 28rpx;
			padding-top: -20rpx !important;

			.balance {
				font-size: 48rpx;
				color: #333;
				margin-right: 10rpx;
				font-weight: bold;
			}
		}

		.qrcode {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}
	}

	.cardpackitem {
		color: #fff;
		// padding: 30rpx 30rpx 12rpx;
		width: 710rpx;
		height: 280rpx;
		background: linear-gradient(180deg, rgba(194, 242, 217, 0.5) 0%, rgba(206, 255, 230, 0) 100%);
		border-radius: 10rpx;
		border: 1rpx solid;
		border-image: linear-gradient(180deg, rgba(75, 166, 119, 1), rgba(75, 166, 119, 0.4)) 1 1;
		margin-top: 30rpx;

		.card_bg {
			width: 708rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #60BF8F;
		}

		&+.card-pack-item {
			margin-top: 30rpx;
		}

		&.lapse {

			.bottom,
			.balance {
				color: rgb(153, 153, 153) !important;
			}
		}

		.number {
			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.name {
			font-size: 36rpx;
		}

		.bottom {
			color: rgb(102, 102, 102);
			font-size: 28rpx;
			padding-top: -20rpx !important;

			.balance {
				font-size: 48rpx;
				color: #333;
				margin-right: 10rpx;
				font-weight: bold;
			}
		}

		// .qrcode {
		// 	position: absolute;
		// 	right: 10rpx;
		// 	top: 10rpx;
		// }
	}

	.cardpack_item {
		color: #fff;
		// padding: 30rpx 30rpx 12rpx;
		width: 690rpx;
		height: 280rpx;
		background: linear-gradient(180deg, rgba(179, 179, 179, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 10rpx;
		border: 1rpx solid;
		border-image: linear-gradient(180deg, rgba(166, 166, 166, 1), rgba(166, 166, 166, 0.4)) 1 1;
		margin-top: 30rpx;

		.card_bg {
			width: 688rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #BFBFBF 0%, #A6A6A6 100%), #60BF8F;
		}

		&+.card-pack-item {
			margin-top: 30rpx;
		}

		&.lapse {

			.bottom,
			.balance {
				color: rgb(153, 153, 153) !important;
			}
		}

		.number {
			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.name {
			font-size: 36rpx;
		}

		.bottom {
			color: rgb(102, 102, 102);
			font-size: 28rpx;
			padding-top: -20rpx !important;

			.balance {
				font-size: 48rpx;
				color: #333;
				margin-right: 10rpx;
				font-weight: bold;
			}
		}

		// .qrcode {
		// 	position: absolute;
		// 	right: 10rpx;
		// 	top: 10rpx;
		// }
	}
</style>